<template>
  <van-tabbar v-model="footNavActive">
    <van-tabbar-item to="/home">
      <template #icon="props">
        <xIcon :active="props.active" href="icon-shouye"></xIcon>
      </template>
      首页</van-tabbar-item
    >
    <van-tabbar-item to="/classify">
      <template #icon="props">
        <xIcon :active="props.active" href="icon-fenlei"></xIcon> </template
      >分类</van-tabbar-item
    >
    <van-tabbar-item to="/mySession">
      <template #icon="props">
        <xIcon
          :active="props.active"
          href="icon-wodexuexiqu"
        ></xIcon> </template
      >我的</van-tabbar-item
    >
    <van-tabbar-item to="/person">
      <template #icon="props">
        <xIcon
          :active="props.active"
          href="icon-gerenzhongxin"
        ></xIcon> </template
      >个人中心</van-tabbar-item
    >
  </van-tabbar>
</template>

<script>

export default {
  data() {
    return {
      
    };
  },
  computed: {
    footNavActive: {
      get() {
        return this.$store.state.foorNavActive
      },
      set(value) {
        this.$store.commit("setFoorNavActive",value)
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>